<template>
    <div>
        <van-nav-bar
        title="登陆页面"
        left-text="返回"
        left-arrow
        @click-left="back"
        >
        </van-nav-bar>
        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" :disabled="flag">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import Vue from 'vue'
import { Toast, Dialog, NavBar, Form, Field, Button } from 'vant'
import { login } from '../../api/user'

Vue.use(Toast)
Vue.use(Dialog)
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Form)
Vue.use(Field)

export default {
  data () {
    return {
      flag: true,
      username: '',
      password: ''
    }
  },
  watch: {
    username () {
      if (this.username !== '') {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  },
  methods: {
    back () {
      this.$router.push('/home')
      console.log(6)
    }
  }
}
</script>

<style>
    .van-button--info{
        background: linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18);
        border:0;
    }
    .van-button__text{
        font-size:18px;
    }
    .van-nav-bar .van-icon{
        color:red;
    }
    .van-nav-bar__text{
        color:red;
    }
</style>
